<template>
  <div :class="['page-left', collapse ? 'collapsePage' : '']">
    <!--    折叠按钮-->
    <div class="arrow-view">
      <!-- <img  v-if="!collapse" class="icon-arrow"  src="../../../../assets/bigScreen/arrow-left.png" alt="left" @click="collapsePage"> -->
      <!-- <img  v-else class="icon-arrow" src="../../../../assets/bigScreen/arrow-right.png"  alt="right" @click="collapsePage"> -->
      <a-icon type="caret-left" v-if="!collapse" class="icon-arrow" @click="collapsePage"/>
      <a-icon type="caret-right" v-else class="icon-arrow"  @click="collapsePage"/>
    </div>
    <!--    数据区域-->
    <div class="content-data" >
      <div class="content-item">
        <div class="modal-title-container">
          <modal-title class="modal-title" title="各部门用电总量"></modal-title>
        </div>
        <div class="content">
          <div id="chart1" ref="chart1" :style="{width: '100%', height: '100%'}"></div>
        </div>
      </div>
      <div class="content-item">
        <div class="modal-title-container">
          <modal-title class="modal-title" title="各设备用电量"></modal-title>
        </div>
        <div class="content">
          <div id="chart2" ref="chart2" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="content-item">
        <div class="modal-title-container">
          <modal-title class="modal-title" title="各设备日平均用电量"></modal-title>
        </div>
        <div class="content">
          <div id="chart3" ref="chart3" style="width: 100%; height: 100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import modalTitle from "./ModalTitle";
import * as echarts from 'echarts'
import {getAction} from '@/api/manage';

export default {
  name: "ScreenLeft",
  components: { modalTitle },
  data() {
    return {
      collapse: false, //是否折叠
      url: {
        list1: "/consumptionElectricity/consumptionElectricity/getScreenLeftTop", //各部门用电总量 接口
        list2: "/consumptionElectricity/consumptionElectricity/getScreenLeftMiddle", //各设备用电量 接口
        list3: "/consumptionElectricity/consumptionElectricity/getScreenLeftBottom", //各设备日平均用电量 接口
      },
      chart1: null,
      chart2: null,
      chart3: null,
    };
  },
  watch:{
    collapse(val) {
      this.$bus.$emit('collapseLeftPage',this.collapse)
    }
  },
  mounted() {
    this.getList1();
    this.getList2();
    this.getList3();
    window.addEventListener("resize", () => this.windowResize(), false);
    // 定时刷新数据
    const picker= setInterval(() =>{
      // this.getList1();
      // this.getList2();
      // this.getList3();
    }, 30000)
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {
      clearInterval(picker)
    })
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.windowResize, false);
  },
  methods: {
    windowResize() {
      this.$nextTick(()=>{
        if (this.chart1) {
          this.chart1.resize();
        }
        if (this.chart2) {
          this.chart2.resize();
        }
        if (this.chart3) {
          this.chart3.resize();
        }
      })
    },
    collapsePage() {
      this.collapse = !this.collapse
      this.$bus.$emit('collapseLeftPage',this.collapse)

    },
    //默认设置当前年月
    defaultDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      return year + "-" + month;
    },
    getList1() {
      getAction(this.url.list1)
          .then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.initData1(res.result);
              });
            }
          })
    },
    initData1(result) {
      let data = [];
      result.forEach((item, index) => {
        item.name = item.name ? item.name : "";
        item.value = item.value ? item.value : 0;
        data.push(item);
      });
      console.log(data);
      // let fireData = result.fire ? result.fire : 0;
      // let patrolData = result.patrol ? result.patrol : 0;
      // let cameraData = result.camera ? result.camera : 0;
      // let infraredData = result.infrared ? result.infrared : 0;
      // let perimeterData = result.perimeter ? result.perimeter : 0;
      // let accessData = result.access ? result.access : 0;
      // let soundData = result.sound ? result.sound : 0;
      // let data=[
      //   {
      //     name:'火灾',
      //     value:fireData
      //   },{
      //     name:'巡更',
      //     value:patrolData
      //   },{
      //     name:'视频',
      //     value:cameraData
      //   },{
      //     name:'红外',
      //     value:infraredData
      //   },{
      //     name:'周界',
      //     value:perimeterData
      //   },{
      //     name:'门禁',
      //     value:accessData
      //   },{
      //     name:'拾音',
      //     value:soundData
      //   },
      // ]

      let colorList=['#AB6FF5','#EA4E5C','#DED802',  '#34CC99', '#F7A900', '#8DBC00', '#1ACBDB', '#008FBB']

      if (!this.chart1) {
        let chartDom = document.getElementById('chart1')
        this.chart1 = echarts.init(chartDom);
      }
      let myChart = this.chart1
      this.chart1.setOption({
        tooltip: {
          trigger: "item",
        },
        // color: ['#EE6666', '#40B27D', '#7ED3F4', '#FC8452', '#5C7BD9', '#A969C6', '#FAC858'],
        // color: ['#EE6666', '#FFD76C', '#7873E6', '#F87CA6', '#5A6EC0', '#6CFf92', '#73C0DE'],
        // color: ['#EA4E5C', '#AB6FF5', '#5DBE89', '#F29E56', '#469BEE', '#7B69F1', '#F5B84D'],
        color: colorList,
        grid: {
          left: 10,
          right:25,
          top:10,
          bottom:10,
          containLabel:true
        },
        series: [
          //下方配置为echarts图表外边框配置详情，
          {
            name: '外边框',
            type: 'pie',
            tooltip: {
              show: false,
            },
            clockwise: false, //顺时加载
            emphasis:{scale: false}, //鼠标移入变大
            center:['50%','50%'],//这里跟上面那组一样即可
            radius: ['66%', '66%'],//这里根据自己的需要自行调整，但是两个值要一样大哦
            label: {
                show: false //重点：此处主要是为了不展示data中的value和name
            },
            data: [{
              value: 1,//此处的值无所谓是多少
              name: '',//因为不展示label，可不填
              itemStyle: { //边框样式，此处我们设置的浅蓝色，颜色可自行修改
                // normal: {
                  borderWidth: 15,//边框宽度
                  borderColor: 'rgba(32, 62, 135,  0.3)'//边框颜色
                // }
              }
            }]
          },
          {
            name: '内边框',
            type: 'pie',
            tooltip: {
              show: false,
            },
            clockwise: false, //顺时加载
            // hoverAnimation: false, //鼠标移入变大
            center:['50%','50%'],//这里跟上面那组一样即可
            radius: ['30%', '30%'],//这里根据自己的需要自行调整，但是两个值要一样大哦
            label: {
              // normal: {
                show: false //重点：此处主要是为了不展示data中的value和name
              // }
            },
            data: [{
              value: 1,//此处的值无所谓是多少
              name: '',//因为不展示label，可不填
              itemStyle: { //边框样式，此处我们设置的浅蓝色，颜色可自行修改
                // normal: {
                  borderWidth: 2,//边框宽度
                  borderColor: '#4073DC'//边框颜色
                // }
              }
            }]
          },
          {
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['50%', '50%'],
            label: {
              alignTo: 'edge',
              formatter: '{dept|{b}}\n{consumption|{d}%}',
              minMargin: 5,
              edgeDistance: 20,
              lineHeight: 15,
              rich: {
                name:{
                  fontSize: 11,
                  fontWeight:500
                  // color: '#64BCFF'
                },
                percent: {
                  fontSize: 12,
                  fontWeight:500
                  // color: '#fff'
                }
              }
            },
            labelLine: {
              length: 1,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x <  myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                  ? params.labelRect.x
                  : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points
              };
            },
            // data: data,
            data: data.map((item, index) => {
              item.label = {
                // 两个地方，保持图表和label的颜色一致
                color: colorList[index+1],
              }
              return item
            })
          },
        ],


      });
    },
    getList2() {
      getAction(this.url.list2)
          .then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.initData2(res.result);
              });
            }
          })
    },
    initData2(result) {
      console.log(result);
      let device = [];
      let consumption = [];

      result.forEach((item, index) => {
        device.push(item.device ? item.device : "");
        consumption.push(item.consumption ? item.consumption : 0);
      });
      if (!this.chart2) {
        this.chart2 = echarts.init(this.$refs.chart2);
      }
      this.chart2.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: 10,
          right:10,
          top: 30,
          bottom: 8,
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: device,
          axisTick: { show: false },
          //网格线
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#64BCFF",
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLine: { show: false },
          splitLine: {
            show: false,
          },
          axisLabel: {//y轴文字的配置
            color: "#64BCFF",
          },
        },
        series: [
          {
            data: consumption,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.1)'
            },
            label: {
              show: true,
              position: 'top',
              color:'#fff'
            },
            barWidth:15,
            itemStyle: {
              borderRadius: [10,10,0,0],
              offset:0,
              //设置柱体渐变色
              //5个参数 前面的 0,0,0,1 分别表示为 右，下，左，上，1表示从上方开始
              //offset 范围是 0~1 表示位置 color为颜色
              color: new echarts.graphic.LinearGradient(
                  0, 1, 0, 0,
                  [
                    {offset: 0, color: '#19329E'},
                    {offset: 1, color: '#21A8FF '}
                  ]
              )
            },
          },
        ],
      });
    },
    getList3() {
      getAction(this.url.list3, {})
          .then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                console.log(res.result);
                this.initData3(res.result);
              });
            }
          })
    },
    initData3(result) {
      // let alarmData = [];
      // let fireData = [];
      // let accessData = [];
      // let cameraData = [];
      // let soundData = [];
      // let patrolData = [];
      // let perimeterData = [];
      // let infraredData = [];

      // result.forEach((item, index) => {
      //   alarmData.push(item.alarmDate ? item.alarmDate : "");
      //   fireData.push(item.fire ? item.fire : 0); //火灾
      //   accessData.push(item.access ? item.access : 0); //门禁
      //   cameraData.push(item.camera ? item.camera : 0); //视频
      //   soundData.push(item.sound ? item.sound : 0); //拾音
      //   patrolData.push(item.patrol ? item.patrol : 0); //巡更
      //   perimeterData.push(item.perimeter ? item.perimeter : 0); //周界
      //   infraredData.push(item.infrared ? item.infrared : 0); //红外
      // });
      console.log(result);
      let device = [];
      let consumption = [];

      result.forEach((item, index) => {
        device.push(item.device ? item.device : "");
        consumption.push(item.consumption ? item.consumption : 0);
      });

      if (!this.chart3) {
        this.chart3 = echarts.init(this.$refs.chart3);
      }
      this.chart3.setOption({
        tooltip: {
          trigger: "axis",
        },
        // color: ['#EE6666', '#A969C6', '#7ED3F4', '#FAC858', '#40B27D', '#5C7BD9', '#FC8452'],
        color: ['#EE6666', '#6CFF92', '#7873E6', '#39FFF4', '#FFD76C', '#5A6EC0', '#F87CA6'],
        legend: {
          data: ["用电量"],
          top: "5%",
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 3,
          textStyle: {
            color: "#64BCFF"
          },
        },
        grid: {
          left: 30,
          right: 20,
          top: 50,
          bottom: 30,
        },
        xAxis: {
          type: "category",
          data: device,
          axisPointer: {
            type: "shadow",
          },
          axisTick: { show: false },
          //网格线
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#64BCFF",
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: { show: false },
          axisLine: { show: false },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {//y轴文字的配置
            color: "#64BCFF",
          },
        },
        series: [
          {
            data: consumption,
            name: "用电量",
            type: "line",
            symbol: "none",
            smooth: true,
            areaStyle:{
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 区域渐变颜色
                  {
                    offset: 0,
                    color: '#EE6666', //0%处的颜色（较深）
                  },
                  {
                    offset: 1,
                    color: '#ee66662b',//100%处的颜色（较浅即可）
                  },
                ],
                global: false,
              },
            },
          },
          // {
          //   data: accessData,
          //   name: "门禁",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle:{
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [  // 区域渐变颜色
          //         {
          //           offset: 0,
          //           color: '#6CFF92', //0%处的颜色（较深）
          //         },
          //         {
          //           offset: 1,
          //           color: '#6cff920f',//100%处的颜色（较浅即可）
          //         },
          //       ],
          //       global: false,
          //     },
          //   },
          // },
          // {
          //   data: cameraData,
          //   name: "视频",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle:{
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [  // 区域渐变颜色
          //         {
          //           offset: 0,
          //           color: '#7873E6', //0%处的颜色（较深）
          //         },
          //         {
          //           offset: 1,
          //           color: '#7873e62e',//100%处的颜色（较浅即可）
          //         },
          //       ],
          //       global: false,
          //     },
          //   },
          // },
          // {
          //   data: soundData,
          //   name: "拾音",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle:{
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [  // 区域渐变颜色
          //         {
          //           offset: 0,
          //           color: '#39FFF4', //0%处的颜色（较深）
          //         },
          //         {
          //           offset: 1,
          //           color: '#39fff41a',//100%处的颜色（较浅即可）
          //         },
          //       ],
          //       global: false,
          //     },
          //   },
          // },
          // {
          //   data: patrolData,
          //   name: "巡更",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle:{
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [  // 区域渐变颜色
          //         {
          //           offset: 0,
          //           color: '#FFD76C', //0%处的颜色（较深）
          //         },
          //         {
          //           offset: 1,
          //           color: '#ffd76c1a',//100%处的颜色（较浅即可）
          //         },
          //       ],
          //       global: false,
          //     },
          //   },
          // },
          // {
          //   data: perimeterData,
          //   name: "周界",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle:{
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [  // 区域渐变颜色
          //         {
          //           offset: 0,
          //           color: '#5A6EC0', //0%处的颜色（较深）
          //         },
          //         {
          //           offset: 1,
          //           color: '#5a6ec033',//100%处的颜色（较浅即可）
          //         },
          //       ],
          //       global: false,
          //     },
          //   },
          // },
          // {
          //   data: infraredData,
          //   name: "红外",
          //   type: "line",
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle:{
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [  // 区域渐变颜色
          //         {
          //           offset: 0,
          //           color: '#F87CA6', //0%处的颜色（较深）
          //         },
          //         {
          //           offset: 1,
          //           color: '#f87ca626',//100%处的颜色（较浅即可）
          //         },
          //       ],
          //       global: false,
          //     },
          //   },
          // },
        ],
      });
    },
  },
};
</script>

<style scoped lang="less">
//@bg-color-main:#03122ed6;
@bg-color-main:#001e4ce8;
.collapsePage {
  //width: 5px !important;
  left: calc(-20% + 5px) !important;
  background: transparent !important;
}
@media screen and (max-width: 1280px) {
  .collapsePage {
    left: calc(-260px + 5px) !important;
  }
}
.page-left {
  width: 20%;
  height: 89%;
  min-width: 260px;
  min-height: 750px;
  position: absolute;
  transform: translate(0px, 0px);
  left: 0;
  top: 11%;
  z-index: 10;
  background-color: @bg-color-main;
  //background: linear-gradient(to right, rgba(0,0,0,1), rgba(255, 0, 0, 0));
  transition: all 0.1s ease-in-out;

  .arrow-view {
    width: 24px;
    height: 24px;
    position: absolute;
    right: -24px;
    top: 45%;
    background-color: @bg-color-main;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    cursor: pointer;

  }
  .icon-arrow {
    width:100%;
    height: 100%;
    color: #fff;
  }

  .content-data {
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .content-item {
      width: 100%;
      height: 32%;
      // background-image: url("../../../../assets/bigScreen/areabg3.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .modal-title-container {
        width: 300px;
        height: 48px;
        .modal-title {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        width: 100%;
        height: calc(100% - 35px);
        color: #fff;
      }
    }
  }

  

  
}
</style>